<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./media/favicon.png" type="image/png">
    <script src="./js/vue.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/config.js"></script>
    <script src="./js/axios@1.5.0_dist_axios.min.js"></script>
    <link rel="stylesheet" href="./style/wounded.css">
    <link rel="stylesheet" href="./style/main.css">
    <script src="./js/highcharts.js"></script>
    <script src="./js/highcharts-3d.js"></script>
    <script src="./js/exporting.js"></script>
    <style>
        @media (min-width: 1920px) {
            html {
                font-size: 20%;
            }
        }

        @media (min-width: 2040px) {
            html {
                font-size: 32%;
            }
        }

        @media (min-width: 3840px) {
            html {
                font-size: 62.5%;
            }
        }
    </style>
    <title>伤员</title>
</head>

<body>
    <div id="app">
        <div id="wounded">
            <div class="content">
                <div id="left" class="content_item">
                    <div class="Consulting_room" v-for="(item, index) in woundedData.list" :key="index">
                        <title-bg :title="item.RoomName"></title-bg>
                        <div class="consulting_room_content flex">
                            <div class="bed">
                                <div class="top">
                                    床位总数
                                    <span>{{ item.BedNo }}</span>
                                    个
                                </div>
                                <div class="highCharts" :id="index"></div>
                            </div>
                            <div class="bed_info">
                                <bed-info title="已用床位" :num="item.Used">
                                    <img src="./media/img/used-bed.png" />
                                </bed-info>
                                <bed-info class="bottom" title="可用床位" :num="item.Unused">
                                    <img src="./media/img/vacantbed.png" />
                                </bed-info>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="right" class="content_item">
                    <div class="wounded_sort">
                        <title-bg title="伤员分类"></title-bg>
                        <div class="wounded_sort_content">
                            <div class="item top_left">
                                <div class="item_title">轻伤统计</div>
                                <div class="num">
                                    {{ woundedCategoryData.Slight.TagNo }}
                                    <span>人</span>
                                </div>
                            </div>
                            <div class="item top_right">
                                <div class="item_title">重伤统计</div>
                                <div class="num">
                                    {{ woundedCategoryData.Serious.TagNo }}
                                    <span>人</span>
                                </div>
                            </div>
                            <div class="item bottom_left">
                                <div class="item_title">手术统计</div>
                                <div class="num">
                                    {{ woundedCategoryData.operation.TagNo }}
                                    <span>人</span>
                                </div>
                            </div>
                            <div class="item bottom_right">
                                <div class="item_title">隔离数量</div>
                                <div class="num">
                                    {{ woundedCategoryData.isolate.TagNo }}
                                    <span>人</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wounded_num">
                        <title-bg title="伤员数量"></title-bg>
                        <div class="wounded_num_All flex">
                            <div class="imgbox">
                                <img class="content_img" src="./media/img/wounded.png" />
                                <img class="base_img" src="./media/img/wounded-total-icon-bg.png" />
                            </div>
                            <div class="num flex">
                                <div class="num_title">伤员总数</div>
                                <div class="num_num">
                                    {{ totalWounded }} <span>人</span>
                                </div>
                            </div>
                        </div>
                        <div id="chart" ref="chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/component.js"></script>
    <script src="./js/http.js"></script>
    <script src="./js/api.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                woundedData: {
                    list: [],
                },
                woundedCategoryData: {
                    Slight: {
                        TagNo: 0,
                    },
                    Serious: {
                        TagNo: 0,
                    },
                    operation: {
                        TagNo: 0,
                    },
                    isolate: {
                        TagNo: 0,
                    },
                },
                totalWounded: 0,
                chart: null,
                echartsOptions: options,
                highOptions: highOptions,
                threeOptions: threeOptions,
                pieChartList: []
            },
            async mounted() {
                await this.getWoundedStatistics();
                setInterval(async () => {
                    await this.getWoundedStatistics();
                    this.drawChart();
                }, 60 * 1000);
                this.initChart();
                this.initPieChart();
                setTimeout(() => {
                    this.drawChart();
                }, 300);
            },
            methods: {
                // 获取伤员统计数据
                async getWoundedStatistics() {
                    await getWoundedStatistics().then(res => {
                        let data = res.data;
                        console.log(res, data);
                        if (res.code == 0) {
                            if (res.data) {
                                this.totalWounded = data.AllTagNo.TagNo || 0;
                                this.handleEchartsData(data.listTagNo)
                                this.woundedData.list = data.listRoomNo;
                                if (this.pieChartList.lenght > 0) {
                                    this.woundedData.list.forEach(item => {
                                        // 'Unused 已用' 'Used 可用'
                                        // let arr = [
                                        //     { value: item.Used, name: "已用" },
                                        //     { value: item.Unused, name: "可用" }
                                        // ]
                                        // let chartData = JSON.parse(JSON.stringify(_this.highOptions))
                                        // chartData.series[0].data = JSON.parse(JSON.stringify(arr)).sort((a, b) => b.value - a.value)
                                        let D_3D = [
                                            {
                                                y: item.Used, name: "已用", sliced: true,
                                                selected: true,
                                                h: 30
                                            },
                                            {
                                                y: item.Unused, name: "可用", sliced: true,
                                                selected: true,
                                                h: 50
                                            }
                                        ]
                                        let chart3DSeries = JSON.parse(JSON.stringify(_this.threeOptions))
                                        chart3DSeries.series[0].data = D_3D
                                        this.pieChartList.forEach((item, inde) => {
                                            // item.operation = chartData
                                            item.operation = chart3DSeries
                                        })
                                    })
                                }
                                data.listTagType.forEach(item => {
                                    switch (item.TagType) {
                                        case "轻伤":
                                            this.woundedCategoryData.Slight = item;
                                            break;
                                        case "重伤":
                                            this.woundedCategoryData.Serious = item;
                                            break;
                                        case "手术":
                                            this.woundedCategoryData.operation = item;
                                            break;
                                        case "隔离":
                                            this.woundedCategoryData.isolate = item;
                                            break;
                                        default:
                                            break;
                                    }
                                });
                            }
                        } else {
                            alert(res.msg);
                        }
                    })
                },
                //处理图表数据
                handleEchartsData(data = []) {
                    let xAxisData = data?.map((item) => item.TagType) || [];
                    let seriesData = data?.map((item) => item.TagNo) || [];
                    this.echartsOptions.xAxis.data = xAxisData;
                    this.echartsOptions.series[0].data = seriesData;
                },
                //echarts图表初始化
                initChart() {
                    this.chart = echarts.init(document.getElementById("chart"));
                },
                //饼图初始化
                initPieChart() {
                    let _this = this
                    this.pieChartList = this.woundedData.list.map((item, index) => {
                        // 'Unused 已用' 'Used 可用'
                        // let arr = [
                        //     { value: item.Used, name: "已用" },
                        //     { value: item.Unused, name: "可用" }
                        // ]
                        // let chartData = JSON.parse(JSON.stringify(_this.highOptions))
                        // chartData.series[0].data = JSON.parse(JSON.stringify(arr)).sort((a, b) => b.value - a.value)
                        // //
                        let D_3D = [
                            {
                                y: item.Used,
                                name: "已用",
                                sliced: true,
                                selected: true,
                                h: 30
                            },
                            {
                                y: item.Unused,
                                name: "可用",
                                sliced: true,
                                selected: true,
                                h: 50
                            }
                        ]
                        let chart3DSeries = JSON.parse(JSON.stringify(_this.threeOptions))
                        chart3DSeries.series[0].data = D_3D

                        return {
                            operation: chart3DSeries,
                        }
                    })
                    console.log(this.pieChartList);
                },
                //绘制图表
                drawChart() {
                    if (!this.chart) {
                        this.chart = echarts.init(document.getElementById("chart"));
                    }
                    this.$nextTick(() => {
                        this.chart.setOption(this.echartsOptions);
                        this.pieChartList.forEach((item, index) => {
                            let indexString = index + ''
                            Highcharts.chart(indexString, item.operation)
                        })
                    })
                },
            },
        })
    </script>
</body>

</html>